Pré-requisitos: Projeto de Interface
Definição de como o software é estruturado em termos dos componentes que fazem parte da solução e do ambiente de hospedagem da aplicação.
Diagrama que permite a modelagem física de um sistema, através da visão dos seus componentes e relacionamentos entre os mesmos.
Exemplo:
Os componentes que fazem parte da solução são apresentados na Figura XX.
A solução implementada conta com os seguintes módulos:
- Navegador - Interface básica do sistema
- Páginas Web - Conjunto de arquivos HTML, CSS, JavaScript e imagens que implementam as funcionalidades do sistema.
- Local Storage - armazenamento mantido no Navegador, onde são implementados bancos de dados baseados em JSON. São eles:
- Canais - seções de notícias apresentadas
- Comentários - registro de opiniões dos usuários sobre as notícias
- Preferidas - lista de notícias mantidas para leitura e acesso posterior
- News API - plataforma que permite o acesso às notícias exibidas no site.
- Hospedagem - local na Internet onde as páginas são mantidas e acessadas pelo navegador.
Links Úteis:
Inclua um diagrama da solução e descreva os módulos e as tecnologias que fazem parte da solução. Discorra sobre o diagrama.
A imagem a seguir ilustra a o fluxo do usuário em nossa solução. Assim que o usuário entra na plataforma, ele é apresentado à tela inicial (Tela 1) onde ele é confrontado com as opões de editar seu perfil ou então visualizar sua galeria.
Caso ele opte por seguir pelo primeiro caminho (Editar Perfil), ele é redirecionado para a tela de edição de perfil (Tela 2), onde pode atualizar seus dados cadastrais. Nessa tela, o usuário também pode escolher para editar sua foto de perfil. Ao selecionar essa opção, ele é redirecionado para a Tela 3, onde ele a imagem expandida do perfil do usuário é mostrado. Ao selecionar a opção para atualizar a imagem, uma nova janela abre pedindo para o usuário fazer o upload da nova foto. Assim que o processo termina um pop-up exibe o status para o usuário (Tela 4) e o usuário é redirecionado para a Tela 2.
Caso o usuário opte seguir pelo segundo caminho (Visualizar Galeria) ele é redirecionado para a Tela 5 com todas as fotos que o usuário possui. O usuário pode clicar em um post qualquer para visualizar os detalhes do post (Tela 6). Nessa tela, ele pode então escolher editar o post, sendo redirecionado para a Tela 7. Ao editar as informações, o usuário pode escolher salvar ou deletar o post. Em ambos os casos o status é notificado para o usuário (Tela 8) e em seguida ele é redirecionado para a Tela 2.
Descreva aqui qual(is) tecnologias você vai usar para resolver o seu problema, ou seja, implementar a sua solução. Liste todas as tecnologias envolvidas, linguagens a serem utilizadas, serviços web, frameworks, bibliotecas, IDEs de desenvolvimento, e ferramentas.
Apresente também uma figura explicando como as tecnologias estão relacionadas ou como uma interação do usuário com o sistema vai ser conduzida, por onde ela passa até retornar uma resposta ao usuário.
Explique como a hospedagem e o lançamento da plataforma foi feita.
Links Úteis: